<template>
  <div class="wrap">
    <Top Top="我的编辑" />
    <div class="user-png">
      <van-uploader :after-read="afterRead">
        <img v-if='userinfo.head_img' :src="$axios.defaults.baseURL+userinfo.head_img" alt class="png" />
        <img v-else src="@/assets/2.jpg" alt class="png" />
      </van-uploader>
    </div>

    <div class="myinfo">
      <TextDom title="昵称" @clicked="nickShow = true" :Text="userinfo.nickname" />
      <TextDom title="密码" @clicked="passwordShow =true" :Text="userinfo.password" />
      <TextDom title="性别" @clicked="genderShow = true" :Text="userinfo.gender == 1?'男':'女'" />
    </div>
    <!-- 昵称的弹出框 -->
    <van-dialog v-model="nickShow" title="昵称" @confirm="changeNickname" show-cancel-button>
      <van-field v-model="nicknameValue" placeholder="请输入昵称" />
    </van-dialog>
    <!-- 密码的弹出框 -->
    <van-dialog v-model="passwordShow" title="密码" @confirm="changePassword" show-cancel-button>
      <van-field v-model="passwordValue" type="password" placeholder="请输入密码" />
    </van-dialog>
    <!-- 选择性别框 -->
    <van-action-sheet 
    v-model="genderShow"
    :actions="actions" 
    @select="changeGender" 
    cancel-text="取消" />
  </div>
</template>

<script>
// 引入顶部组件
import Top from "@/components/Top.vue";

// 引入文本框组件
import TextDom from "@/components/TextDom";

export default {
  components: {
    Top,
    TextDom,
  },
  data() {
    return {
      nickShow: false,
      passwordShow: false,
      genderShow: false,
      nicknameValue: "",
      passwordValue: "",
      userinfo: "",
      actions: [{ name: "女" }, { name: "男" }],
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: "https://cloud-image", isImage: true },
      ],
    };
  },

  created() {
    this.init();
  },
  methods: {
    init() {
      //  用户详情
      //  接口类型:【GET】
      //  需要验证:【Authorization 】
      //  接口地址: /user/:id

      this.$axios({
        method: "get",
        url: "/user/" + localStorage.getItem("userid"),
      }).then((res) => {
        //  console.log(res);
        this.userinfo = res.data.data;
      });
    },
    render(obj) {
      // 编辑用户信息
      // 口类型:【POST】
      // 要验证:【Authorization 】
      // 接口地址: /user_update/:id
      // 参数  :id  username password nickname head_img gender
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userid"),
        data: obj,
      }).then((res) => {
        console.log(res);
        this.init();
      });
    },

    // 修改nickname是的函数
    changeNickname() {
      this.render({
        nickname: this.nicknameValue,
      });
      this.nicknameValue = "";
    },
    changePassword() {
      render({
        password: this.passwordValue,
      });
      this.passwordValue = "";
    },
    changeGender(item, num) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // console.log(item, num);
      this.genderShow = false;
       this.render({
         gender:num
       })
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file.file);
      let data = new FormData()
      data.append('file',file.file)
      // console.log(data.get('file'));
      // 文件上传
      // 接口类型:【POST】
      // 需要验证:【Authorization 】
      // 接口地址: /upload
      // 参数: file
      this.$axios({
        method:'post',
        url:'/upload',
        data
      }).then((res)=>{
        // console.log(res);
        // console.log(res.data.data.url);
        this.render({
          head_img:res.data.data.url
        })
      })
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  font-size: 16/360 * 100vw;
}

.user-png {
  height: 100/360 * 100vw;
  text-align: center;
     .png {
              width: 100/360*100vw;
              height: 100/360*100vw;
              border-radius: 50/360*100vw;
              margin: 0 auto;
              background-color: pink;
          }
}

.myinfo {
  padding-left: 10/360 * 100vw;
}
</style>